<template>
	<div class="main fx">
		<div class="mainx fx">
			<div class="mainx_c fx">
				<div class="mainx_cr fx">

					<div class="mainx_crx fx">
						<div class="mainx_cr_u fx">
							<div class="mainx_cr_uL fx">
								企业管理 / 员工管理
							</div>
							<div class="mainx_cr_uR fx">
								<div class="mainx_cr_uR1 fx" @click="toJ" style="margin-right: 30px;">
									投递简历
								</div>
<!--								<div class="mainx_cr_uR1 fx" @click="toP" style="margin-right: 30px;">-->
<!--									企业岗位管理-->
<!--								</div>-->
								<div class="mainx_cr_uR1 fx" @click="add">
									新增员工
								</div>
							</div>

						</div>

						<el-table :data="datalist" :cell-style="{'font-size': '18px'}" :row-style="{'font-size': '18px'}" border stripe highlight-current-row max-height="800" size="small"
							style="width: 100%;min-width: 800px;font-size: 18px;">
							<el-table-column sortable type="index" align="center" width="70" label="序号">
							</el-table-column>
							<el-table-column prop="staffName" align="center" width="350" label="员工姓名"> </el-table-column>
							<el-table-column prop="staffPosition" sortable align="center" label="员工职位"
								width="120"></el-table-column>
							<el-table-column prop="contackWay" align="center" label="联系方式" min-width="10%"></el-table-column>


							<!--操作按钮开始-->
							<el-table-column label="操作" align="center" width="250">
								<template #default="scope">
									<el-button type="danger" size="mini"
										v-if="!scope.row.is_admin"
										@click="handleDelete(scope.$index, scope.row)">删除</el-button>
									<el-button type="success" size="mini" style="background-color: #3e72adff;"
										@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
								</template>
							</el-table-column>
							<!--操作按钮结束-->

						</el-table>

						<!--分页-->
						<el-pagination @current-change="handleCurrentChange" :current-page="page1.currentPage"
							:page-size="page1.pageSize" background layout="prev, pager, next" :total="page1.totalCount"
							style="float: right; margin: 10px 20px 0 0">
						</el-pagination>

					</div>


				</div>





			</div>
		</div>


		<el-dialog v-model="s_edit" top='60px' width="800">
			<div class="padd fx">
				<div class="fx" style="height: 30px;font-weight: bold;font-size: 16px;">
					{{title}}
				</div>
				
				<div class="padd_u fx">
					<div class="padd_ul fx">
						姓名
					</div>
					<div class="padd_ur fx">
						<input type="text" v-model="form1.staffName" placeholder="请输入员工姓名" />
					</div>
				</div>
				<div class="padd_u fx">
					<div class="padd_ul fx">
						员工职位
					</div>
					<div class="padd_ur fx">
						<input type="text" v-model="form1.staffPosition" placeholder="请输入员工职位" />
					</div>
				</div>
				<div class="padd_u fx">
					<div class="padd_ul fx">
						联系方式
					</div>
					<div class="padd_ur fx">
						<input type="text" v-model="form1.contackWay" placeholder="请输入联系方式" />
					</div>
				</div>
				<div class="padd_u fx">
					<div class="padd_ul fx">
						用户Id
					</div>
					<div class="padd_ur fx">
						<input type="text" v-model="form1.usrId" placeholder="请输入联系方式" />
					</div>
				</div>
				<div class="padd_u fx">
					<div class="padd_ul fx">
						企业Id
					</div>
					<div class="padd_ur fx">
						<input type="text" v-model="form1.enterpriseId" placeholder="请输入联系方式" />
					</div>
				</div>


				<div class="btn fx" @click="sub()">
					提交
				</div>

			</div>
		</el-dialog>


	</div>
</template>

<script>

import {useAccountStore} from "@/stores/account";
	import request from "@/api/http";
	import {
		ElMessage
	} from 'element-plus'
	export default {
		data() {
			return {
				datalist: [
					// {
					// 	staffName:'张三',
					// 	staffPosition:'组长',
					// 	contackWay:'13904057582',
					// },
					// {
					// 	staffName:'张三',
					// 	staffPosition:'组长',
					// 	contackWay:'13904057582',
					// }
				], //表格数据
				page1: {
					currentPage: 1, // 当前页
					pageSize: 10, // 每页显示条目个数
					totalCount: 2, // 总条目数
				},
				s_edit: false,
				title:"",
				
				form1:{
					staffName:"",//员工姓名
					staffPosition:"",//员工职位
					contackWay:"",//联系方式
					usrId:"",//用户id
					enterpriseId:"",//企业密钥
				},//表单信息

				accountStore: useAccountStore()

			}
		},
		mounted() {
			console.log(276666)
			console.log(this.accountStore)
			// console.log(this.accountStore.user)
			console.log(28888)
			console.log(this.accountStore.enterprise.enterpriseId)
			console.log(this.accountStore.enterprise)
			 this.init();
		},
		methods: {
			toP(){
				this.$router.push('/position')
			},
			toJ(){
				this.$router.push('/listall')
			},
			init(){
				request({
				    url: `/enterprise/get_employees?enterpriseId=${this.accountStore?.enterprise?.enterpriseId||1}`,
				    method: 'get',
				    data: {
				        enterpriseld: this.accountStore?.enterprise?.enterpriseId,//企业id/也可改成企业名
				    }
				}).then(res=>{
					console.log(11122);
					console.log(res);
					if(res?.list){
						res.list.map(v=>{
							v.staffName=v.name
							v.staffPosition=v.position
							v.contackWay=v.contact_way
						})
					}
					
					this.datalist=res?.list||[]
					
					
				})
			},
			sub(){
				request({
				    url: `/enterprise/add_employee`,
					// url: `/enterprise/add_employee`,
				    method: 'post',
				    data: {
				        staffName: this.form1.staffName,//员工姓名
				        staffPosition: this.form1.staffPosition,//员工职位
				        contactWay: this.form1.contackWay,//联系方式
				        usrId: this.form1.usrId,//要添加的员工id 1
				        enterpriseId: this.form1.enterpriseId,//企业id/也可改成企业名 5
				    }
				}).then(res=>{
					console.log(67888);
					console.log(res);
					if(res.errno==1){
						this.init();
						this.s_edit=false
						ElMessage.success("添加成功");
					}else{
						ElMessage.error(`${res.msg}`)
					}
				})
			},
			handleDelete(index, row) {
				console.log(6788);
				console.log(row);
				this.$confirm("确认删除该员工数据吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(() => {
						console.log(6888);
						console.log(row);
						
						request({
						    url: '/enterprise/delete_employee',
						    method: 'post',
						    data: {
								enterpriseId:this.accountStore?.enterprise?.enterpriseId,
								targetUsrId:row.id
								
						    }
						}).then(res=>{
							console.log(67888);
							console.log(res);
							if(res.errno==1){
								this.init()
								ElMessage.success("删除成功");
							}else{
								ElMessage.error(`${res.msg}`)
							}
						})
						
						
						
					})
					.catch(() => {});
			},
			handleEdit(){
				this.title="编辑员工信息"
				this.s_edit=true
			},
			add(){
				this.title="新增员工"
				this.s_edit=true
			}
			
		}
	}
</script>

<style scoped>
	.fx{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
	}
	.main {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
	}
	.mainx {
		flex-direction: column;
		justify-content: flex-start;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 0px 30px;
		padding-top: 0px;
		background-color: #f1f3f5f7;
	
	}
	.mainx_u {
		height: 60px;
		flex-shrink: 0;
		font-size: 20px;
		font-weight: bold;
		color: #000000f7;
		letter-spacing: 4px;
		box-sizing: border-box;
		padding-right: 20px;
		
		background-color: #fffffff7;
	}
	.mainx_ul {
		font-weight: bold;
		letter-spacing: 4px;
	}
	
	.mainx_ur {
		flex-shrink: 0;
		width: auto;
		height: 30px;
		letter-spacing: 2px;
		color: #fffffff7;
		border: 1px solid #00aafff7;
		background-color: #00aafff7;
		cursor: pointer;
		font-size: 14px;
		padding: 0px 20px;
		border-radius: 6px;
	}
	.mainx_ur:hover {
		background-color: #009debf7;
		color: #fffffff7;
	}
		
	.mainx_c {
		margin-top: 20px;
		align-items: flex-start;
		height: 100%;
	}
	.mainx_cl {
		flex-direction: column;
		justify-content: flex-start;
		height: 100%;
		width: 130px;
		flex-shrink: 0;
		background-color: #009debf7;
		background-color: #fffffff7;
	}
	
	.mainx_cl1 {
		margin-top: 5px;
		height: 50px;
		box-sizing: border-box;
		color: #000000f7;
		font-weight: bold;
		font-size: 14px;
		letter-spacing: 1px;
		cursor: pointer;
	}
	
	.mainx_cl1:first-of-type {
		margin-top: 0px;
	}
	
	.mainx_cl1:hover {
		color: #fffffff7;
		background-color: #009debf7;
	}
		
	.actv {
		color: #fffffff7;
		background-color: #009debf7;
	}
	
	
	.mainx_cr {
		/* margin-left: 20px; */
		flex-direction: column;
		height: 100%;
		justify-content: flex-start;
		background-color: #fffffff7;
	}
	
	.mainx_crx {
		flex-direction: column;
		height: 100%;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 0 20px;
	}
		
	.mainx_cr_u {
		min-height: 100px;
		height: auto;
		width: 100%;
		padding: 0px 20px;
		box-sizing: border-box;
	}
	
	.mainx_cr_uL {
		margin-top: 20px;
		float: left;
		width: 100%;
		height: 40px;
		font-weight: bold;
		justify-content: flex-start;
	}
	
	.mainx_cr_uR {
		justify-content: flex-end;
	}
	.mainx_cr_uR1{
		flex-shrink: 0;
		width: auto;
		height: 30px;
		letter-spacing: 2px;
		color: #fffffff7;
		border: 1px solid #00aafff7;
		background-color: #3e72adff;
		cursor: pointer;
		font-size: 14px;
		padding: 0px 20px;
		border-radius: 6px;
	}
	.mainx_cr_uR1:hover {
		background-color: #009debf7;
		color: #fffffff7;
	}
	
	
	

	.padd {
		width: 100%;
		height: auto;
		padding-bottom: 30px;
		flex-direction: column;
		justify-content: flex-start;
	}
	
	.padd_u {
		margin-top: 20px;
		height: 40px;
		width: 80%;
	}
	.padd_u:first-of-type {
		margin-top: 0px;
	}
		
	.padd_ul {
		width: 140px;
		flex-shrink: 0;
		background-color: #f1f3f7;
	}
		
	.padd_ur {
		background-color: #ffff00f7;
	}
	.padd_ur input {
		width: 100%;
		height: 100%;
		border: 2px solid #f1f3f7;
		padding-left: 30px;
		box-sizing: border-box;
	}
	
	.padd_ur input:focus {
		/* border: 1px solid #1aa094; */
		outline: 1px solid #00aaff;
	}
	
	.btn {
		width: 60%;
		height: 40px;
		border-radius: 8px;
		background-color: #3e72adff;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
		margin-top: 30px;
	}
	
	.mylabel{
		font-size: 28px;
	}
</style>